<template>
  <base-table-layout
    title="育苗计划管理"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    @update:currentPage="val => currentPage = val"
    @update:pageSize="val => pageSize = val"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  >
    <!-- 搜索区域 -->
    <template #search>
      <el-input
        v-model="searchForm.growerName"
        placeholder="农户姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      <dept-tree-select
        v-model="searchForm.deptId"
        placeholder="选择部门"
        width="300px"
        class="filter-item"
        @change="handleSearch"
      />
      <el-date-picker
        v-model="searchForm.dateRange"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
        value-format="yyyy-MM-dd"
        style="width: 350px"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="info"
        icon="el-icon-refresh"
        @click="resetSearch"
      >重置</el-button>
      <div class="excel-operation">
        <el-button type="success" icon="el-icon-download" @click="downloadTemplate">下载模板</el-button>
        <el-upload
          style="display: inline-block; margin-left: 10px;"
          action="#"
          :show-file-list="false"
          :http-request="handleExcelUpload"
          accept=".xlsx,.xls"
        >
          <el-button type="primary" icon="el-icon-upload">导入Excel</el-button>
        </el-upload>
      </div>
    </template>

    <!-- 操作区域 -->
    <template #operation>
      <el-button
        type="success"
        icon="el-icon-plus"
        @click="handleAdd"
      >新增计划</el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        :disabled="!selectedPlans.length"
        @click="handleBatchDelete"
      >批量删除</el-button>
      <div v-if="selectedPlans.length" style="display: inline-block; margin-left: 10px;">
        已选择 {{ selectedPlans.length }} 条记录
      </div>
    </template>

    <!-- 表格区域 -->
    <template #table>
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="planList"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="planId" label="计划ID" width="100" />
          <el-table-column prop="growerName" label="农户名称" width="120" />
          <el-table-column label="所属部门" min-width="400">
            <template slot-scope="scope">
              <el-tag size="mini" type="success">{{ scope.row.tobaccoStationName }}</el-tag>
              <el-tag size="mini" type="warning" style="margin-left: 5px">{{ scope.row.townName }}</el-tag>
              <el-tag size="mini" type="danger" style="margin-left: 5px">{{ scope.row.villageGroupName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="计划日期" width="180">
            <template slot-scope="scope">
              {{ scope.row.planDate }}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="计划数量(亩)" width="120" />
          <el-table-column prop="statusDesc" label="状态" width="120">
            <template>
              <el-tag type="success">
                计划已提交
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
          <el-table-column prop="createTime" label="创建时间" width="180" />
          <el-table-column label="操作" width="250" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button 
                size="mini" 
                type="danger" 
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-footer">
          <div class="total-area">总计: {{ totalArea }}亩</div>
        </div>
      </div>
    </template>

    <!-- 弹窗区域 -->
    <template #dialogs>
      <!-- 新增/编辑对话框 -->
      <el-dialog 
        :title="dialogTitle" 
        :visible.sync="dialogVisible" 
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="农户" prop="growerId">
            <el-input
              v-model="selectedGrowerName"
              placeholder="请选择农户"
              readonly
              style="width: 100%"
              @click.native="showGrowerSelectDialog"
            />
          </el-form-item>
          <el-form-item label="计划日期" prop="planDate">
            <el-date-picker
              v-model="form.planDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              :picker-options="{
                disabledDate(time) {
                  return time.getTime() < Date.now() - 8.64e7;
                }
              }"
            />
          </el-form-item>
          <el-form-item label="计划数量" prop="quantity">
            <el-input-number 
              v-model="form.quantity" 
              :min="1" 
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </el-dialog>

      <!-- 使用农户选择组件 -->
      <grower-select 
        :visible.sync="growerSelectVisible" 
        @select="handleGrowerSelect"
      />

      <!-- 导入结果对话框 -->
      <el-dialog
        :visible.sync="importResultDialogVisible"
        title="导入结果"
        width="90%"
        class="import-result-dialog"
        :close-on-click-modal="false"
        append-to-body
      >
        <div class="import-result-content">
          <div class="summary-info">导入完成，成功: {{ importResults.success.length }}条，失败: {{ importResults.fail.length }}条</div>
          
          <template v-if="importResults.success.length > 0">
            <div class="success-title">成功导入的农户计划：</div>
            <div class="table-container">
              <table>
                <thead>
                  <tr>
                    <th>农户姓名</th>
                    <th>身份证号</th>
                    <th>计划数量</th>
                    <th>计划详情</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in importResults.success" :key="index">
                    <td>{{ item.growerName || '-' }}</td>
                    <td>{{ item.idCard || '-' }}</td>
                    <td>{{ item.planCount || 0 }}个</td>
                    <td>
                      <div v-for="(plan, planIndex) in item.planDetails" :key="planIndex">
                        {{ plan.planDate }}: {{ plan.quantity }}亩
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>

          <div v-if="importResults.fail.length > 0" class="fail-section">
            <div class="fail-title">导入失败的记录：</div>
            <div class="table-container">
              <table>
                <thead>
                  <tr>
                    <th>农户姓名</th>
                    <th>身份证号</th>
                    <th>计划日期</th>
                    <th>计划数量</th>
                    <th>失败原因</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in importResults.fail" :key="index">
                    <td>{{ item.growerName }}</td>
                    <td>{{ item.idCard }}</td>
                    <td>{{ item.planDate }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.reason }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="importResultDialogVisible = false">确定</el-button>
        </span>
      </el-dialog>

      <!-- 进度条对话框 -->
      <el-dialog
        title="处理进度"
        :visible.sync="progressVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="600px"
        class="progress-dialog"
      >
        <div class="progress-content">
          <el-progress 
            :percentage="progressPercentage" 
            :format="percent => `${percent}%`"
            :stroke-width="24"
            class="custom-progress"
          />
          <div class="progress-text">{{ progressText }}</div>
        </div>
      </el-dialog>
    </template>
  </base-table-layout>
</template>

<script>
import request from '@/utils/request'
import _ from 'lodash'
import moment from 'moment'
import 'moment/locale/zh-cn'
import BaseTableLayout from '@/components/BaseTableLayout.vue'
import * as XLSX from 'xlsx'
import { sleep } from '@/utils'
import GrowerSelect from '@/components/GrowerSelect.vue'
import DeptTreeSelect from '@/components/DeptTreeSelect.vue'

export default {
  name: 'GrowerPlanManager',
  components: {
    BaseTableLayout,
    GrowerSelect,
    DeptTreeSelect
  },
  data() {
    return {
      loading: false,
      searchForm: {
        growerName: '',
        deptId: undefined,
        dateRange: []
      },
      planList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      isEdit: false,
      currentId: null,
      form: {
        growerId: undefined,
        planDate: '',
        quantity: 5,
        remark: ''
      },
      rules: {
        growerId: [
          { required: true, message: '请选择农户', trigger: 'change' }
        ],
        planDate: [
          { required: true, message: '请选择计划日期', trigger: 'change' }
        ],
        quantity: [
          { required: true, message: '请输入计划数量', trigger: 'blur' }
        ]
      },
      growerOptions: [],
      growerSelectVisible: false,
      selectedGrowerName: '',
      selectedPlans: [], // 选中的计划列表
      importResultDialogVisible: false,
      importResults: {
        success: [],
        fail: []
      },
      progressVisible: false,
      progressText: '',
      progressPercentage: 0
    }
  },
  computed: {
    dialogTitle() {
      return this.isEdit ? '编辑育苗计划' : '新增育苗计划'
    },
    totalArea() {
      return this.planList.reduce((sum, item) => {
        const value = Number(item.quantity)
        return sum + (isNaN(value) ? 0 : value)
      }, 0).toFixed(2)
    }
  },
  created() {
    moment.locale('zh-cn')  // 设置中文
    this.fetchGrowerOptions()
    this.fetchPlanList()
  },
  methods: {
    // 获取农户选项
    async fetchGrowerOptions() {
      try {
        const response = await request.get('/growers/page', {
          params: {
            pageSize: 100 // 获取足够多的农户
          }
        })
        if (response && response.records) {
          this.growerOptions = response.records.map(item => ({
            growerId: item.growerId,
            growerName: `${item.growerName}(${item.deptName})`
          }))
        }
      } catch (error) {
        console.error('获取农户列表失败:', error)
        this.$message.error('获取农户列表失败')
      }
    },

    // 获取育苗计划列表
    async fetchPlanList() {
      try {
        this.loading = true
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          growerName: this.searchForm.growerName || undefined,
          deptId: this.searchForm.deptId || undefined,
          planDateStart: this.searchForm.dateRange ? this.searchForm.dateRange[0] : undefined,
          planDateEnd: this.searchForm.dateRange ? this.searchForm.dateRange[1] : undefined
        }
        const response = await request.get('/grower-plans/page-query', { params })
        if (response && response.records) {
          this.planList = response.records
          this.total = response.total
        }
      } catch (error) {
        console.error('获取育苗计划列表失败:', error)
        this.$message.error('获取育苗计划列表失败')
      } finally {
        this.loading = false
      }
    },

    handleSearch: _.debounce(async function() {
      this.currentPage = 1
      await this.fetchPlanList()
    }, 300),

    resetSearch() {
      this.searchForm = {
        growerName: '',
        deptId: undefined,
        dateRange: []
      }
      this.handleSearch()
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.fetchPlanList()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchPlanList()
    },

    // 显示农户选择对话框
    showGrowerSelectDialog() {
      this.growerSelectVisible = true
    },

    // 处理农户选择
    handleGrowerSelect(grower) {
      this.form.growerId = grower.growerId
      this.selectedGrowerName = `${grower.growerName}(${grower.deptName})`
      this.growerSelectVisible = false
    },

    // 显示新增对话框
    handleAdd() {
      this.isEdit = false
      this.currentId = null
      // 设置为明天
      const tomorrow = moment().add(1, 'days')
      this.form = {
        growerId: undefined,
        planDate: tomorrow.format('YYYY-MM-DD'),
        quantity: 5,
        remark: ''
      }
      this.selectedGrowerName = ''
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },

    // 显示编辑对话框
    handleEdit(row) {
      this.isEdit = true
      this.currentId = row.planId
      this.form = {
        growerId: row.growerId,
        planDate: row.planDate,
        quantity: row.quantity,
        remark: row.remark
      }
      this.selectedGrowerName = row.growerName
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },

    // 删除育苗计划
    handleDelete(row) {
      this.$confirm('确认删除该育苗计划吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await request.delete(`/grower-plans/${row.planId}`)
          this.$message.success('删除成功')
          this.fetchPlanList()
        } catch (error) {
          console.error('删除育苗计划失败:', error)
          this.$message.error('删除育苗计划失败')
        }
      }).catch(() => {})
    },

    // 提交表单
    async handleSubmit() {
      try {
        await this.$refs.form.validate()
        if (this.isEdit) {
          // 编辑育苗计划
          await request.put(`/grower-plans/${this.currentId}`, this.form)
          this.$message.success('编辑成功')
        } else {
          // 新增育苗计划
          await request.post('/grower-plans', this.form)
          this.$message.success('添加成功')
        }
        this.dialogVisible = false
        this.fetchPlanList()
      } catch (error) {
        if (error !== false) {
          console.error(this.isEdit ? '编辑育苗计划失败:' : '添加育苗计划失败:', error)
          this.$message.error(this.isEdit ? '编辑育苗计划失败' : '添加育苗计划失败')
        }
      }
    },

    // 修改handleExcelUpload方法
    async handleExcelUpload({ file }) {
      try {
        const reader = new FileReader()
        reader.onload = async (e) => {
          const data = e.target.result
          const workbook = XLSX.read(data, { type: 'array' })
          const worksheet = workbook.Sheets[workbook.SheetNames[0]]
          const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })

          if (!excelData || excelData.length < 2) {
            this.$message.error('Excel文件内容为空')
            return
          }

          // 获取表头（第一行）
          const headers = excelData[0]
          if (!headers || headers.length < 3) {
            this.$message.error('Excel格式不正确，至少需要包含农户姓名、身份证号和计划日期列')
            return
          }

          // 获取日期列（从第3列开始）
          const dateColumns = []
          for (let j = 2; j < headers.length; j++) {
            const dateStr = headers[j]
            if (dateStr) {
              // 确保dateStr是字符串类型
              const dateString = String(dateStr)
              
              // 解析中文格式的日期（例如：2025年4月5日）
              const match = dateString.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/)
              if (match) {
                const [, year, month, day] = match
                // 转换为标准格式 YYYY-MM-DD
                const formattedDate = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
                dateColumns.push(formattedDate)
              } else {
                // 如果不是中文格式，尝试作为Excel日期处理
                try {
                  const excelDate = XLSX.SSF.parse_date_code(dateStr)
                  if (excelDate) {
                    const formattedDate = `${excelDate.y}-${String(excelDate.m).padStart(2, '0')}-${String(excelDate.d).padStart(2, '0')}`
                    dateColumns.push(formattedDate)
                  } else {
                    dateColumns.push(undefined)
                  }
                } catch (error) {
                  console.error('解析Excel日期失败:', error)
                  dateColumns.push(undefined)
                }
              }
            } else {
              dateColumns.push(undefined)
            }
          }

          // 初始化导入结果
          const importResults = {
            success: [],
            fail: []
          }

          // 显示进度条
          this.showProgress('正在导入数据...')
          
          // 获取总行数（减去表头）
          const totalRows = excelData.length - 1
          let processedRows = 0

          // 处理每一行数据
          for (let i = 0; i < totalRows; i++) {
            const row = excelData[i + 1]
            const currentRow = {
              idCard: row[1]
            }

            try {
              // 查询农户信息
              const growerResponse = await request.get('/growers/by-idcard', {
                params: { idCard: currentRow.idCard }
              })

              if (!growerResponse || !growerResponse.growerId) {
                throw new Error(`未找到身份证号为 ${currentRow.idCard} 的农户`)
              }

              const planDetails = []
              // 处理每个日期的计划
              for (let j = 0; j < dateColumns.length; j++) {
                const planQuantity = row[j + 2]
                const currentDate = dateColumns[j]
                
                let quantity = null
                if (planQuantity !== undefined && planQuantity !== null) {
                  if (typeof planQuantity === 'number') {
                    quantity = planQuantity
                  } else if (typeof planQuantity === 'string') {
                    const trimmed = planQuantity.trim()
                    if (trimmed !== '') {
                      quantity = parseFloat(trimmed)
                    }
                  }
                }

                if (!isNaN(quantity) && quantity > 0) {
                  try {
                    // 构建计划数据
                    const planData = {
                      growerId: growerResponse.growerId,
                      deptId: growerResponse.deptId,
                      planDate: currentDate,
                      quantity: quantity,
                      remark: ''
                    }
                    await request.post('/grower-plans', planData)
                    
                    planDetails.push({
                      planDate: currentDate,
                      quantity: quantity
                    })
                  } catch (error) {
                    // 如果后端返回错误（比如日期已存在计划），将错误信息添加到失败列表
                    importResults.fail.push({
                      ...currentRow,
                      growerName: growerResponse.growerName,
                      planDate: currentDate,
                      quantity: quantity,
                      reason: error || '添加计划失败'
                    })
                  }
                }
              }

              // 根据实际的计划数量更新成功信息
              if (planDetails.length > 0) {
                importResults.success.push({
                  ...currentRow,
                  growerName: growerResponse.growerName,
                  planCount: planDetails.length,
                  planDetails
                })
              }

              processedRows++
              this.updateProgress(processedRows, totalRows)
              
              await sleep(500)
            } catch (error) {
              console.error('导入单条数据失败:', error)
              importResults.fail.push({
                ...currentRow,
                growerName: row[0] || '-',  // 从Excel中获取农户姓名
                reason: error.message || '导入失败'
              })
            }
          }

          this.closeProgress()
          
          // 显示导入结果对话框
          this.importResults = importResults
          this.importResultDialogVisible = true

          this.handleSearch()
        }
        reader.readAsArrayBuffer(file)
      } catch (error) {
        this.closeProgress()
        console.error('导入Excel失败:', error)
        this.$message.error(error.message || '导入Excel失败，请检查文件格式是否正确')
      }
    },

    // 修改handleBatchDelete方法
    async handleBatchDelete() {
      try {
        await this.$confirm('确认删除选中的育苗计划吗？此操作不可恢复！', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })

        const totalPlans = this.selectedPlans.length
        let processedPlans = 0
        
        // 显示进度条
        this.showProgress('正在删除数据...')

        let successCount = 0
        let failCount = 0

        // 依次删除每个计划
        for (const plan of this.selectedPlans) {
          try {
            await request.delete(`/grower-plans/${plan.planId}`)
            successCount++
          } catch (error) {
            console.error(`删除计划${plan.planId}失败:`, error)
            failCount++
          }
          
          processedPlans++
          this.updateProgress(processedPlans, totalPlans)
          
          await sleep(500)
        }

        this.closeProgress()
        
        // 显示删除结果
        this.$message({
          type: successCount > 0 ? (failCount === 0 ? 'success' : 'warning') : 'error',
          message: `删除完成：成功${successCount}条${failCount > 0 ? `，失败${failCount}条` : ''}`
        })

        this.fetchPlanList()
      } catch (error) {
        this.closeProgress()
        if (error !== 'cancel') {
          console.error('批量删除失败:', error)
          this.$message.error('批量删除失败')
        }
      }
    },

    // 下载模板
    async downloadTemplate() {
      try {
        // 生成未来7天的日期
        const dates = []
        for (let i = 0; i < 7; i++) {
          const date = new Date()
          date.setDate(date.getDate() + i)
          dates.push(date.toISOString().split('T')[0])
        }

        // 创建工作簿和工作表
        const wb = XLSX.utils.book_new()
        
        // 创建表头
        const headers = ['农户姓名', '身份证号', ...dates.map(d => d), '备注']
        
        // 创建示例数据
        const exampleData = [
          ['张三', '530321199001011234', '2.5', '3.0', '', '1.5', '', '', '', '计划育苗7亩'],
          ['李四', '530321199002022345', '', '2.0', '2.5', '', '', '1.5', '', '']
        ]
        
        // 合并所有数据
        const data = [
          headers,
          ...exampleData
        ]
        
        const ws = XLSX.utils.aoa_to_sheet(data)
        
        // 设置列宽
        ws['!cols'] = [
          { wch: 15 }, // 农户姓名
          { wch: 20 }, // 身份证号
          { wch: 12 }, // 日期1
          { wch: 12 }, // 日期2
          { wch: 12 }, // 日期3
          { wch: 12 }, // 日期4
          { wch: 12 }, // 日期5
          { wch: 12 }, // 日期6
          { wch: 12 }, // 日期7
          { wch: 20 }  // 备注
        ]
        
        // 添加工作表到工作簿
        XLSX.utils.book_append_sheet(wb, ws, '育苗计划')
        
        // 生成文件名（包含当前日期）
        const now = new Date()
        const fileName = `育苗计划导入模板_${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}.xlsx`
        
        // 下载文件
        XLSX.writeFile(wb, fileName)
        this.$message.success('模板下载成功')
      } catch (error) {
        console.error('下载模板失败:', error)
        this.$message.error('下载模板失败')
      }
    },

    handleSelectionChange(selection) {
      this.selectedPlans = selection
    },

    // 显示进度条对话框
    showProgress(text) {
      this.progressVisible = true
      this.progressText = text
      this.progressPercentage = 0
    },
    
    // 更新进度
    updateProgress(current, total) {
      this.progressPercentage = Math.floor((current / total) * 100)
    },
    
    // 关闭进度条
    closeProgress() {
      this.progressVisible = false
      this.progressText = ''
      this.progressPercentage = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}

.filter-item {
  margin-left: 10px;
}

.filter-container {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  
  .total-area {
    font-size: 14px;
    color: #606266;
    font-weight: bold;
    margin-left: 20px;
  }
  
  .el-pagination {
    margin-right: 20px;
  }
}

// 确保对话框的层级和尺寸
:deep(.el-dialog) {
  z-index: 2000;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  max-width: 90vw;
  width: auto !important;
  height: auto !important;
  
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #EBEEF5;
  }
  
  .el-dialog__footer {
    padding: 20px;
    border-top: 1px solid #EBEEF5;
  }
}

// 表格容器样式
.table-container {
  position: relative;
}

.table-footer {
  position: absolute;
  left: 0;
  bottom: -40px;
  z-index: 1;
}

.total-area {
  font-size: 14px;
  color: #606266;
  font-weight: bold;
  padding: 10px 0;
}

// 对话框遮罩层样式
:deep(.el-dialog__wrapper) {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-form-item__content) {
  line-height: normal;
}

:deep(.el-table__footer-wrapper) {
  td {
    background: #f5f7fa;
    color: #606266;
    font-weight: bold;
  }
}

.excel-operation {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  
  .el-upload {
    margin-left: 10px;
  }
  
  .el-button {
    margin: 0;
  }
}

// 导入结果对话框样式
.import-result-dialog {
  .import-result-content {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .summary-info {
    font-size: 16px;
    margin-bottom: 20px;
    color: #606266;
  }

  .success-title, .fail-title {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0 10px;
    padding-left: 10px;
    border-left: 4px solid;
  }

  .success-title {
    border-left-color: #67C23A;
  }

  .fail-title {
    border-left-color: #F56C6C;
  }

  .table-container {
    margin: 10px 0;
    
    table {
      width: 100%;
      border-collapse: collapse;
      
      th, td {
        padding: 12px;
        text-align: left;
        border: 1px solid #EBEEF5;
      }
      
      th {
        background-color: #F5F7FA;
        color: #606266;
        font-weight: bold;
      }
      
      tr:hover {
        background-color: #F5F7FA;
      }
    }
  }
}

.progress-dialog {
  :deep(.el-dialog) {
    width: 600px !important;
    
    .el-dialog__body {
      padding: 30px;
    }
  }

  .progress-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;

    .custom-progress {
      width: 100%;
      margin-bottom: 20px;

      :deep(.el-progress-bar__outer) {
        height: 24px !important;
        background-color: #EBEEF5;
        border-radius: 12px;
      }

      :deep(.el-progress-bar__inner) {
        background-color: #409EFF;
        border-radius: 12px;
        transition: width 0.3s ease;
      }

      :deep(.el-progress__text) {
        font-size: 18px;
        color: #409EFF;
        font-weight: bold;
        margin-left: 10px;
      }
    }

    .progress-text {
      font-size: 16px;
      color: #606266;
      margin-top: 15px;
      text-align: center;
    }
  }
}
</style> 